<template>
  <div class="loginbody">
    <div class="logindata">
      <div class="logintext">
        <h2>Sign Up</h2>
      </div>
      <div class="formdata">
        <el-form ref="form" :model="registInfo" :rules="rules">
          <el-form-item prop="adminName">
            <el-input
              v-model="registInfo.adminName"
              clearable
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="adminPwd">
            <el-input
              v-model="registInfo.adminPwd"
              clearable
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="adminPwd2">
            <el-input
              v-model="registInfo.adminPwd2"
              clearable
              prefix-icon="el-icon-lock"
              placeholder="请再次输入密码"
              show-password
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="butt">
        <el-button type="primary" @click="regist()"
        >注册</el-button
        >
        <el-button type="primary" @click="resetForm('form')"
        >重置</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>

  //导入axios
  import axios from 'axios'

  //导入Qs
  import Qs from 'qs'

  export default {
    name:'regist',
    //1.绑定的数据
    data(){
      var validateAdminPwd = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.registInfo.adminPwd2 !== "") {
            this.$refs.ruleForm.validateField("adminPwd2");
          }
          callback();
        }
      };

      var validatePwd2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.registInfo.adminPwd) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        //2.绑定表单元素的属性值
        registInfo:{
          adminName:"",
          adminPwd:"",
          adminPwd2:""
        },
        //3.验证规则
        rules: {
          //-验证用户名是否输入
          adminName: [{required:true,message:'此项为必填项',trigger:'blur'}],
          adminPwd: [{ required: true, validator: validateAdminPwd, trigger: "blur" }],
          adminPwd2: [
            { required: true, validator: validatePwd2, trigger: "blur" },
          ],
        }
      }
    },
    //2.登录的请求及处理
    methods:{
      regist() {
        //定义临时变量获取对应的this对象，通过this对象可以访问data()中的内容
        var that = this;
        //发送post请求后端处理
        axios({
              headers:{'Content-Type':'application/x-www-form-urlencoded'},
              method:"post",
              url:"http://localhost:1313/admin/regist",
              data:Qs.stringify({adminName:that.registInfo.adminName,adminPwd:that.registInfo.adminPwd})
            }).then((res)=>{
          console.log(res)
          //判断当前状态码请求是否成功
          if (res.data.code == 200) {
                //1.消息提示
                that.$message({
                  message: res.data.msg,
                  type:'success'
                })
                //2.注册成功后跳转登录根页面
                that.$router.replace("/")
              } else {
                    that.$message({
                    message: res.data.msg,
                    type:'error'
                })
            // 清空文本框数据
            that.registInfo.adminName ="";
            that.registInfo.adminPwd  ="";
            that.registInfo.adminPwd2  ="";
          }
        })
      },

      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    }
  }

</script>
<style>
  .loginbody {
    margin-top: -60px;
    width: 100%;
    height: 100%;
    min-width: 1000px;
    background-image: url("../../assets/yo.jpg");
    background-size: 100% 100%;
    background-position: center center;
    overflow: auto;
    background-repeat: no-repeat;
    position: fixed;
    line-height: 100%;
    padding-top: 150px;
  }

  .logintext {
    margin-bottom: 20px;
    line-height: 50px;
    text-align: center;
    font-size: 30px;
    font-weight: bolder;
    color: white;
    text-shadow: 2px 2px 4px #000000;
  }

  .logindata {
    width: 400px;
    height: 300px;
    transform: translate(-50%);
    margin-left: 50%;
  }

  .tool {
    display: flex;
    justify-content: space-between;
    color: #606266;
  }

  .butt {
    margin-top: 10px;
    text-align: center;
  }

  .shou {
    cursor: pointer;
    color: #606266;
  }

  /*ui*/
  /* /deep/ .el-form-item__label {
  font-weight: bolder;
  font-size: 15px;
  text-align: left;
  }

  /deep/ .el-button {
  width: 100%;
  margin-bottom: 10px;

  } */
</style>




